<template>
	<div class="scroll-view-demo4">
		<ynet-scroll-view
			ref="scrollView"
			:scrolling-x="false"
			@scroll="$_onScroll"
		>
			<div
				v-for="i in category"
				:key="i"
				class="scroll-view-category"
			>
				<p class="scroll-view-category-title">{{ i }}</p>
				<div v-for="j in list" :key="j" class="scroll-view-list">
					<p class="scroll-view-item">{{`${i} - ${j}`}}</p>
				</div>
			</div>
		</ynet-scroll-view>
		<p v-if="activeBlockIndex > 0" class="scroll-view-striky-title">{{ activeBlockIndex }}</p>
	</div>
</template>
<script>
	import { ScrollView } from 'ynet-mobile'
	export default {
		title: '粘性标题',
		name: 'scroll-view-demo',
		components: {
			[ScrollView.name]: ScrollView
		},
		data(){
			return {
				category: 5,
				list: 5,
				dimensions: [],
				scrollY: 0
			}
		},
		computed: {
			activeBlockIndex(){
				let activeIndex = -1
				this.dimensions.forEach((dimension, index) => {
					if(this.scrollY >= dimension[0] && this.scrollY <= dimension[1]){
						activeIndex = index + 1
					}
				})
				return activeIndex
			}
		},
		mounted(){
			// 如果内容发生变化，需重新初始化block和scroller
			this.$_initScrollBlock()
		},
		methods: {
			$_onScroll({scrollTop}){
				this.scrollY = scrollTop
			},
			$_initScrollBlock(){
				 const blocks = this.$el.querySelectorAll('.scroll-view-category')
				 const innerHeight = block.clientHeight
				 this.$set(this.dimensions, index, [offset, offset + innerHeight])
				 offset += innerHeight
			}
		}
	}
</script>
<style lang="scss">
.scroll-view-demo4{
	position: relative;
	height: 5.6rem;
	.scroll-view-striky-title{
		position: absolute;
		top:0; right: 0; left: 0; x-index:2;
	}
	.scroll-view-category-title, .scroll-view-striky-title{
		padding: 20px 0;
		text-align: center;
		font-size: 32px;
		background-color: #f0f0f0;
	}
	.scroll-view-item{
		padding: 30px 0;
		text-align: center;
		font-size: 32px;
		border-bottom: .5px solid #efefef
	}
}


</style>